<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-title">井字棋</view>
			<view class="nav-subtitle">Relax！</view>
		</view>

		<!-- 游戏状态 -->
		<view class="game-status">
			<text class="status-text">{{statusText}}</text>
		</view>

		<!-- 游戏棋盘 -->
		<view class="game-board">
			<view class="board-row" v-for="(row, i) in board" :key="i">
				<view 
					class="board-cell" 
					v-for="(cell, j) in row" 
					:key="j"
					@click="makeMove(i, j)"
				>
					<text class="cell-text">{{cell}}</text>
				</view>
			</view>
		</view>

		<!-- 重新开始按钮 -->
		<button class="restart-btn" @click="restartGame">重新开始</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				board: [
					['', '', ''],
					['', '', ''],
					['', '', '']
				],
				currentPlayer: 'X', // X代表玩家，O代表电脑
				gameOver: false,
				winner: null,
				isPlayerTurn: true
			}
		},
		computed: {
			statusText() {
				if (this.gameOver) {
					if (this.winner === 'X') return '恭喜你获胜！';
					if (this.winner === 'O') return '电脑获胜！';
					return '平局！';
				}
				return this.isPlayerTurn ? '轮到你了' : '电脑思考中...';
			}
		},
		methods: {
			makeMove(row, col) {
				if (this.gameOver || this.board[row][col] !== '' || !this.isPlayerTurn) return;
				
				// 玩家下棋
				this.board[row][col] = 'X';
				
				if (this.checkWin()) {
					this.gameOver = true;
					this.winner = 'X';
					return;
				}
				
				if (this.checkDraw()) {
					this.gameOver = true;
					return;
				}
				
				this.isPlayerTurn = false;
				
				// 电脑下棋
				setTimeout(() => {
					this.computerMove();
				}, 500);
			},
			
			computerMove() {
				if (this.gameOver) return;
				
				// 30%概率随机下棋（模拟失误）
				if (Math.random() < 0.3) {
					const emptyCells = [];
					for (let i = 0; i < 3; i++) {
						for (let j = 0; j < 3; j++) {
							if (this.board[i][j] === '') {
								emptyCells.push({row: i, col: j});
							}
						}
					}
					if (emptyCells.length > 0) {
						const randomMove = emptyCells[Math.floor(Math.random() * emptyCells.length)];
						this.board[randomMove.row][randomMove.col] = 'O';
					}
				} else {
					// 正常的AI策略
					// 1. 检查是否有获胜机会
					const winMove = this.findWinningMove('O');
					if (winMove) {
						this.board[winMove.row][winMove.col] = 'O';
					} else {
						// 2. 阻止玩家获胜
						const blockMove = this.findWinningMove('X');
						if (blockMove) {
							this.board[blockMove.row][blockMove.col] = 'O';
						} else {
							// 3. 优先选择中心
							if (this.board[1][1] === '') {
								this.board[1][1] = 'O';
							} else {
								// 4. 随机选择一个空位
								const emptyCells = [];
								for (let i = 0; i < 3; i++) {
									for (let j = 0; j < 3; j++) {
										if (this.board[i][j] === '') {
											emptyCells.push({row: i, col: j});
										}
									}
								}
								if (emptyCells.length > 0) {
									const randomMove = emptyCells[Math.floor(Math.random() * emptyCells.length)];
									this.board[randomMove.row][randomMove.col] = 'O';
								}
							}
						}
					}
				}
				
				if (this.checkWin()) {
					this.gameOver = true;
					this.winner = 'O';
					return;
				}
				
				if (this.checkDraw()) {
					this.gameOver = true;
					return;
				}
				
				this.isPlayerTurn = true;
			},
			
			findWinningMove(player) {
				for (let i = 0; i < 3; i++) {
					for (let j = 0; j < 3; j++) {
						if (this.board[i][j] === '') {
							this.board[i][j] = player;
							if (this.checkWin()) {
								this.board[i][j] = '';
								return {row: i, col: j};
							}
							this.board[i][j] = '';
						}
					}
				}
				return null;
			},
			
			checkWin() {
				const lines = [
					// 横线
					[[0,0], [0,1], [0,2]],
					[[1,0], [1,1], [1,2]],
					[[2,0], [2,1], [2,2]],
					// 竖线
					[[0,0], [1,0], [2,0]],
					[[0,1], [1,1], [2,1]],
					[[0,2], [1,2], [2,2]],
					// 对角线
					[[0,0], [1,1], [2,2]],
					[[0,2], [1,1], [2,0]]
				];
				
				return lines.some(line => {
					const [a, b, c] = line;
					return this.board[a[0]][a[1]] !== '' &&
						this.board[a[0]][a[1]] === this.board[b[0]][b[1]] &&
						this.board[a[0]][a[1]] === this.board[c[0]][c[1]];
				});
			},
			
			checkDraw() {
				return this.board.every(row => row.every(cell => cell !== ''));
			},
			
			restartGame() {
				this.board = [
					['', '', ''],
					['', '', ''],
					['', '', '']
				];
				this.currentPlayer = 'X';
				this.gameOver = false;
				this.winner = null;
				this.isPlayerTurn = true;
			}
		}
	}
</script>

<style lang="scss">
	/* 全局变量 */
	:root {
		--primary-color: #6c8eef;
		--primary-hover: #5a7de0;
		--secondary-color: #f8f9fa;
		--text-color: #2c3e50;
		--border-color: #dee2e6;
		--shadow-sm: 0 4rpx 8rpx rgba(0,0,0,0.05);
		--shadow-md: 0 8rpx 12rpx rgba(0,0,0,0.1);
		--shadow-lg: 0 16rpx 32rpx rgba(0,0,0,0.1);
		--radius-sm: 16rpx;
		--radius-md: 24rpx;
		--radius-lg: 32rpx;
		--spacing-sm: 16rpx;
		--spacing-md: 32rpx;
		--spacing-lg: 48rpx;
	}

	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(233, 236, 239, 0.8) 100%);
		padding: 30rpx;
	}

	.nav-bar {
		margin-bottom: 40rpx;
		padding: 0 20rpx;

		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
			position: relative;
			padding-left: 20rpx;
			margin-bottom: 10rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 32rpx;
				background: #6c8eef;
				border-radius: 4rpx;
			}
		}

		.nav-subtitle {
			font-size: 26rpx;
			color: #666;
			padding-left: 28rpx;
		}
	}

	.game-status {
		text-align: center;
		margin-bottom: 40rpx;
		
		.status-text {
			font-size: 32rpx;
			color: #2c3e50;
			font-weight: 500;
		}
	}

	.game-board {
		background: transparent;
		border-radius: var(--radius-md);
		padding: 20rpx;
		box-shadow: none;
		margin-bottom: 40rpx;
		border: none;
	}

	.board-row {
		display: flex;
		justify-content: center;
	}

	.board-cell {
		width: 180rpx;
		height: 180rpx;
		border: 4rpx solid #333;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		transition: all 0.3s ease;

		&:active {
			background: rgba(248, 249, 250, 0.3);
		}

		.cell-text {
			font-size: 60rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.restart-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: var(--primary-color);
		color: white;
		border-radius: var(--radius-md);
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		box-shadow: var(--shadow-sm);
		transition: all 0.3s ease;

		&:active {
			background: var(--primary-hover);
			transform: translateY(-2rpx);
			box-shadow: var(--shadow-md);
		}
	}

	/* 适配宽屏 */
	@media screen and (min-width: 690px) {
		.container {
			max-width: 600rpx;
			margin: 0 auto;
		}
	}
</style> 